<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类管理</title>
  <link rel="stylesheet" href="css/http_cdn.jsdelivr.net_npm_bootstrap-icons@1.10.0_font_bootstrap-icons.css">
  <style>
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 20px;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background-color: #f8f9fa;
      font-weight: 600;
      color: #2c3e50;
    }

    tr:hover {
      background-color: #f5f7fa;
    }

    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .badge-success {
      background-color: #d4edda;
      color: #155724;
    }

    .badge-warning {
      background-color: #fff3cd;
      color: #856404;
    }

    .action-btn {
      padding: 5px 10px;
      margin-right: 5px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
    }

    .action-btn.edit {
      background-color: #ffc107;
      color: #212529;
    }

    .action-btn.delete {
      background-color: #dc3545;
      color: white;
    }

    .search-bar {
      display: flex;
      margin-bottom: 20px;
    }

    .search-input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      outline: none;
    }

    .search-btn {
      padding: 10px 15px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .page-item {
      margin: 0 5px;
    }

    .page-link {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      color: #3498db;
      text-decoration: none;
    }

    .page-link.active {
      background-color: #3498db;
      color: white;
      border-color: #3498db;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="page-title"><i class="bi bi-tags"></i> 分类管理</h1>
    <button class="btn btn-primary" id="addCategoryBtn"><i class="bi bi-plus"></i> 添加分类</button>
  </div>

  <div class="search-bar">
    <input type="text" class="search-input" placeholder="搜索分类名称...">
    <button class="search-btn"><i class="bi bi-search"></i> 搜索</button>
  </div>

  <div class="table-container">
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>分类名称</th>
        <th>分类图标</th>
        <th>排序</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>电子产品</td>
        <td><i class="bi bi-laptop"></i></td>
        <td>10</td>
        <td><span class="badge badge-success">启用</span></td>
        <td>2023-05-10</td>
        <td>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="bi bi-trash"></i> 删除</button>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>服装</td>
        <td><i class="bi bi-tshirt"></i></td>
        <td>20</td>
        <td><span class="badge badge-success">启用</span></td>
        <td>2023-05-12</td>
        <td>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="bi bi-trash"></i> 删除</button>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>食品</td>
        <td><i class="bi bi-cup-hot"></i></td>
        <td>30</td>
        <td><span class="badge badge-warning">禁用</span></td>
        <td>2023-05-15</td>
        <td>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="bi bi-trash"></i> 删除</button>
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>家居用品</td>
        <td><i class="bi bi-house-door"></i></td>
        <td>40</td>
        <td><span class="badge badge-success">启用</span></td>
        <td>2023-05-18</td>
        <td>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="bi bi-trash"></i> 删除</button>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>图书</td>
        <td><i class="bi bi-book"></i></td>
        <td>50</td>
        <td><span class="badge badge-success">启用</span></td>
        <td>2023-05-20</td>
        <td>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 编辑</button>
          <button class="action-btn delete"><i class="bi bi-trash"></i> 删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="pagination">
    <a href="#" class="page-link">&laquo;</a>
    <a href="#" class="page-link active">1</a>
    <a href="#" class="page-link">2</a>
    <a href="#" class="page-link">3</a>
    <a href="#" class="page-link">&raquo;</a>
  </div>
</div>

<script>
  // 添加分类按钮点击事件
  document.getElementById('addCategoryBtn').addEventListener('click', function() {
    alert('打开添加分类弹窗');
    // 这里可以添加打开模态框的代码
  });

  // 编辑按钮点击事件
  document.querySelectorAll('.action-btn.edit').forEach(btn => {
    btn.addEventListener('click', function() {
      alert('编辑分类');
      // 这里可以添加编辑功能的代码
    });
  });

  // 删除按钮点击事件
  document.querySelectorAll('.action-btn.delete').forEach(btn => {
    btn.addEventListener('click', function() {
      if(confirm('确定要删除这个分类吗？')) {
        alert('分类已删除');
        // 这里可以添加删除功能的代码
      }
    });
  });
</script>
</body>
</html>